<template>
  <div>
    <el-tabs lazy="true" >
      <el-tab-pane label="所有图标">
        <FontAwesomeAll></FontAwesomeAll>
      </el-tab-pane>
      <el-tab-pane label="图标特效">
        <el-tabs lazy="true" >
          <el-tab-pane label="图标大小">
            <FontAwesomeSize61></FontAwesomeSize61>
          </el-tab-pane>
          <el-tab-pane label="图标位置">
            <FontAwesomePosition61></FontAwesomePosition61>
          </el-tab-pane>
          <el-tab-pane label="图标动画">
            <FontAwesomeAnimation61></FontAwesomeAnimation61>
          </el-tab-pane>
          <el-tab-pane label="图标方向">
            <FontAwesomeRotate61></FontAwesomeRotate61>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="商标图标">
        <FontAwesomeBrands></FontAwesomeBrands>
      </el-tab-pane>
      <el-tab-pane label="人员图标">
        <FontAwesomeUser></FontAwesomeUser>
      </el-tab-pane>
      <el-tab-pane label="方向图标">
        <FontAwesomeDirection></FontAwesomeDirection>
      </el-tab-pane>
      <el-tab-pane label="运动图标">
        <FontAwesomeSport></FontAwesomeSport>
      </el-tab-pane>
      <el-tab-pane label="多媒体图标">
        <FontAwesomeMedia></FontAwesomeMedia>
      </el-tab-pane>
      <el-tab-pane label="交通图标">
        <FontAwesomeTraffic></FontAwesomeTraffic>
      </el-tab-pane>
      <el-tab-pane label="餐饮图标">
        <FontAwesomeCater></FontAwesomeCater>
      </el-tab-pane>
      <el-tab-pane label="建筑图标">
        <FontAwesomeBuild></FontAwesomeBuild>
      </el-tab-pane>
      <el-tab-pane label="气象图标">
        <FontAwesomeWeather></FontAwesomeWeather>
      </el-tab-pane>
      <el-tab-pane label="表情图标">
        <FontAwesomeEmoji></FontAwesomeEmoji>
      </el-tab-pane>
      <el-tab-pane label="WEB图标">
        <FontAwesomeWeb></FontAwesomeWeb>
      </el-tab-pane>
      <el-tab-pane label="字符图标">
        <FontAwesomeFont></FontAwesomeFont>
      </el-tab-pane>
      <el-tab-pane label="物品图标">
        <FontAwesomeGoods></FontAwesomeGoods>
      </el-tab-pane>
      <el-tab-pane label="文件图标">
        <FontAwesomeFile></FontAwesomeFile>
      </el-tab-pane>
      <el-tab-pane label="其他图标">
        <FontAwesomeOther></FontAwesomeOther>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name:"FontAwesome61",
  components: {
    FontAwesomeAll:()=>import("./FontAwesomeAll.vue"),//Font Awesome5 图标大小
    FontAwesomeSize61:()=>import("./FontAwesomeSize61.vue"),//图标大小
    FontAwesomePosition61:()=>import("./FontAwesomePosition61.vue"),//图标位置
    FontAwesomeAnimation61:()=>import("./FontAwesomeAnimation61.vue"),//图标动画
    FontAwesomeRotate61:()=>import("./FontAwesomeRotate61.vue"),//图标动画
    FontAwesomeBrands:()=>import("./FontAwesomeBrands.vue"),//Font Awesome6 图标
    FontAwesomeUser:()=>import("./FontAwesomeUser.vue"),//人员图标
    FontAwesomeDirection:()=>import("./FontAwesomeDirection.vue"),//方向图标
    FontAwesomeSport:()=>import("./FontAwesomeSport.vue"),//运动图标
    FontAwesomeMedia:()=>import("./FontAwesomeMedia.vue"),//多媒体图标
    FontAwesomeTraffic:()=>import("./FontAwesomeTraffic.vue"),//交通图标
    FontAwesomeCater:()=>import("./FontAwesomeCater.vue"),//餐饮图标
    FontAwesomeBuild:()=>import("./FontAwesomeBuild.vue"),//建筑图标
    FontAwesomeWeather:()=>import("./FontAwesomeWeather.vue"),//气象图标
    FontAwesomeEmoji:()=>import("./FontAwesomeEmoji.vue"),//表情图标
    FontAwesomeOther:()=>import("./FontAwesomeOther.vue"),//其他图标
    FontAwesomeGoods:()=>import("./FontAwesomeGoods.vue"),//物品图标
    FontAwesomeWeb:()=>import("./FontAwesomeWeb.vue"),//物品图标
    FontAwesomeFont:()=>import("./FontAwesomeFont.vue"),//物品图标
    FontAwesomeFile:()=>import("./FontAwesomeFile.vue"),//文件图标
  },
  data() {
    return {
      item_type:['fa-brands','fa-duotone','fa-light','fa-regular','fa-solid','fa-thin'],
    }
  },
}
</script>

<style  scoped>

</style>